<!DOCTYPE html>
<html
	xmlns="http://www.w3.org/1999/xhtml"
	xmlns:v-bind="http://www.w3.org/1999/xhtml"
	xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3"
	xmlns:shiro="http://www.pollix.at/thymeleaf/shiro"
>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<meta name="keywords" content="SFAC" />
		<meta name="description" content="" />
		<title>Sping Boot</title>

		<!-- 引入 css -->
		<!-- bootstrap -->
		<link href="/vendors/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" />
		<!-- Font Awesome -->
		<link href="/vendors/font-awesome/css/font-awesome.min.css" rel="stylesheet" />
		<!-- Custom -->
		<link href="/css/custom.min.css" rel="stylesheet" />

		<!-- 引入 js -->
		<!-- jQuery -->
		<script src="/vendors/jquery/dist/jquery.min.js"></script>
		<!-- Bootstrap -->
		<script src="/vendors/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
		<!-- vue -->
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" type="text/javascript"></script>
		<!-- layer -->
		<script src="https://cdn.bootcss.com/layer/2.1/layer.js" type="text/javascript"></script>
		<!-- 删除确认框-->
		<script src="/vendors/bootbox/js/bootbox.js" type="text/javascript"></script>
	</head>
	<body class="login">
		<div id="loginDiv">
			<div class="login_wrapper">
				<div class="animate form login_form">
					<section class="login_content">
						<form action="javascript:void(0);">
							<h1>Login Form</h1>
							<div>
								<input
									type="text"
									v-model="user.userName"
									class="form-control"
									placeholder="Username"
									required=""
								/>
							</div>
							<div>
								<input
									type="password"
									v-model="user.password"
									class="form-control"
									placeholder="Password"
									required=""
								/>
							</div>
							<div>
								<input
									class="form-control input-val"
									type="text"
									v-model="inputNum"
									placeholder="请输入验证码（不区分大小写）"
									style="float: left; width: 65%; margin-bottom: 0px"
								/>
								<canvas id="canvas" @click="draw()" width="100" height="36"></canvas>
							</div>
							<div>
								<a class="btn btn-default submit" @click="login()" href="javascript:void(0);">Log in</a>
								<a class="reset_pass" href="#">Lost your password?</a>
							</div>

							<div class="clearfix"></div>

							<div class="separator">
								<p class="change_link">
									New to site?
									<a href="#signup" class="to_register"> Create Account </a>
								</p>

								<div class="clearfix"></div>
								<br />

								<div>
									<h1><i class="fa fa-paw"></i> Gentelella Alela!</h1>
									<p>Copyright © 2022 JiangHu. All rights reserved. 蜀ICP备 2021031966号-1</p>
								</div>
							</div>
						</form>
					</section>
				</div>
			</div>
		</div>

		<script>
			var loginVue = new Vue({
				el: "#loginDiv",
				data: {
					user: {
						userName: "",
						password: "",
					},
					showNum: [],
					inputNum: "",
					domain: "http://127.0.0.1:8005"
				},
				methods: {
					login: function () {
						if (this.user.userName == "" || this.user.password == "") {
							layer.msg("请输入用户名和密码！", { icon: 0 });
							return;
						}

						// if (this.inputNum == "") {
						// 	layer.msg("请输入验证码！", { icon: 0 });
						// 	return;
						// } else if (this.inputNum.toLowerCase() != this.showNum.join("").toLowerCase()) {
						// 	layer.msg("验证码输入错误！", { icon: 0 });
						// 	return;
						// }

						var self = this;
						$.ajax({
							url: self.domain + "/api/account/login",
							type: "post",
							contentType: "application/json",
							data: JSON.stringify(self.user),
							success: function (rs) {
								if (rs.status == 200) {
									location.href = "/test/vueTest";
								} else {
									layer.msg(rs.message, { icon: 0 });
								}
							},
							error: function (erro) {
								layer.msg(erro, { icon: 0 });
							},
						});
					},
					draw: function () {
						var canvas_width = $("#canvas").width();
						var canvas_height = $("#canvas").height();
						var canvas = document.getElementById("canvas"); //获取到canvas的对象
						var context = canvas.getContext("2d"); //获取到canvas画图的环境
						canvas.width = canvas_width;
						canvas.height = canvas_height;
						var sCode = "A,B,C,E,F,G,H,J,K,L,M,N,P,Q,R,S,T,W,X,Y,Z,1,2,3,4,5,6,7,8,9,0";
						var aCode = sCode.split(",");
						var aLength = aCode.length; //获取到数组的长度

						for (var i = 0; i <= 3; i++) {
							var j = Math.floor(Math.random() * aLength); //获取到随机的索引值
							var deg = (Math.random() * 30 * Math.PI) / 180; //产生0~30之间的随机弧度
							var txt = aCode[j]; //得到随机的一个内容
							this.showNum[i] = txt.toLowerCase();
							var x = 10 + i * 20; //文字在canvas上的x坐标
							var y = 20 + Math.random() * 8; //文字在canvas上的y坐标
							context.font = "bold 23px 微软雅黑";

							context.translate(x, y);
							context.rotate(deg);

							context.fillStyle = this.randomColor();
							context.fillText(txt, 0, 0);

							context.rotate(-deg);
							context.translate(-x, -y);
						}
						for (var i = 0; i <= 5; i++) {
							//验证码上显示线条
							context.strokeStyle = this.randomColor();
							context.beginPath();
							context.moveTo(Math.random() * canvas_width, Math.random() * canvas_height);
							context.lineTo(Math.random() * canvas_width, Math.random() * canvas_height);
							context.stroke();
						}
						for (var i = 0; i <= 30; i++) {
							//验证码上显示小点
							context.strokeStyle = this.randomColor();
							context.beginPath();
							var x = Math.random() * canvas_width;
							var y = Math.random() * canvas_height;
							context.moveTo(x, y);
							context.lineTo(x + 1, y + 1);
							context.stroke();
						}
					},
					randomColor: function () {
						var r = Math.floor(Math.random() * 256);
						var g = Math.floor(Math.random() * 256);
						var b = Math.floor(Math.random() * 256);
						return "rgb(" + r + "," + g + "," + b + ")";
					},
				},
				mounted() {
					this.draw();
				},
			});
		</script>
	</body>
</html>
